<template>
	<view v-if="goodsList.length > 0">
		<!-- 页首 -->
		<zw-header></zw-header>

		<!-- 面包屑 -->
		<bread-crumb :pages="[{name: '订单评价', linkUrl: '/pages/order/comment/index'}, {name: '商品评价'}]" separator="/"></bread-crumb>

		<!-- 左侧导航栏 -->
		<menu-wrapper active-index="1-2">
			<!-- 标题 -->
			<view class="title">商品评价</view>
			<!-- 快递评价 -->
		<!-- 	<view class="express-comment">
				<view class="main-wrap">
					<view class="left">
						<rate class="rate" name="快递包装" :score="express.packagingScore" :disabled="expressDisabled" :showSuffix="false"
						 @change="packagingScoreChange"></rate>
						<rate class="rate" name="快递速度" :score="express.speedScore" :disabled="expressDisabled" :showSuffix="false"
						 @change="speedScoreChange"></rate>
					</view>
					<view class="right comment-box">
						<textarea class="textarea-comment" placeholder="还有想说的吗？您的意见对我们非常重要" maxlength="500" auto-height v-model="express.comment"
						 :disabled="expressDisabled"></textarea>
						<view class="font-count">{{express.comment.length}}/500</view>
					</view>
				</view>
				<view class="btn-wrap" v-if="!expressDisabled">
					<button class="btn" @click="submitExpressComment">发表评价</button>
				</view>
			</view> -->
			<!-- 商品评价 -->
			<view class="goods-comment" v-for="(item, index) in goodsList" :key="index">
				<view class="main-wrap">
					<navigator :url="`/pages/goods/index?id=${item.goodsId}`">
						<image class="thumb" :src="String(item.logo).split(',')[0]" mode="aspectFit"></image>
					</navigator>
					<view class="right">
						<view class="top">
							<!-- <rate class="rate" name="评分" :score="item.rate"  :showSuffix="false" @change="goodsScoreChange($event, index)"></rate> -->
							<u-rate @change='changeRate'  :count="5" inactive-icon='star-fill' v-model="item.rate" size='50' active-color='#e93323' :min-count='1'></u-rate>
							<view class="level">{{levels[item.rate - 1]}}</view>
						</view>
						<view class="bottom comment-box">
							<textarea class="textarea-comment" placeholder="可以从包装、品质等多个角度描述哦" maxlength="500" auto-height v-model="item.remark"
							></textarea>
							
						</view>
					</view>
				</view>
				<view class="bottom-wrap">
					<navigator class="goods-name" :url="`/pages/goods/index?id=${item.goodsId}`">{{item.name}}</navigator>
					<view class="right">
						<block v-for="(url, photoIndex) in item.imgList" :key="photoIndex">
							<image class="photo" :src="url" mode="aspectFill" @click="previewPhoto(url)" @contextmenu.prevent="deletePhoto(item.imgList, photoIndex, item.scoreStatus)"></image>
						</block>
						<view class="btn-upload" @click="choosePhoto(item.imgList,index)" v-if="item.imgList.length < 6 ">
							<i class="icon i-plus"></i>
						</view>
						
					</view>
				</view>
				
			</view>
			<view class="btnBox">
				<view class="btn" @click="submitsComment()" >发表评价</view>
			</view>
		</menu-wrapper>

		<!-- 页脚 -->
		<zw-footer></zw-footer>
	</view>
</template>

<script>
	import menuWrapper from '@/components/user/common/menu-wrapper.vue';
	import rate from '@/components/order/rate.vue';

	export default {
		components: {
			menuWrapper,
			rate
		},
		data() {
			return {
				orderNo: '',
				evaluate:[],
				express: {},
				goodsList: [],
				levels: ['非常不满意', '不满意', '一般', '满意', '非常满意'],
				info:''
			}
		},
		onLoad(e) {
			if (!e.orderNo) {
				uni.redirectTo({
					url: '/pages/index'
				});
				return;
			}
			this.orderNo = e.orderNo;
			this.findDetails();
		},
		computed: {
			// expressDisabled() {
			// 	return this.express.scoreStatus == 1;
			// }
		},
		methods: {
			findDetails() {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				this.uni_request({
					url: '/user/order/detail/' + this.orderNo,
					method: 'POST',
					success: (res) => {
						uni.hideLoading()
						if (res.data.code == 0 || res.data.code == 200) {
							this.info = res.data.data
							// this.goodsList = res.data.data.detailList
							if(this.info.combinationId){
								var arr = {
									logo:this.info.combinationCover,
									productName:this.info.combinationName,
									remark:'',
									rate:0,
									imgList:[],
									isShow:false
								}
								this.goodsList.push(arr)
							}else{
								for (var i = 0; i < res.data.data.detailList.length; i++) {
									res.data.data.detailList[i].remark = '';
									res.data.data.detailList[i].rate = 0;
									res.data.data.detailList[i].imgList = [];
									res.data.data.detailList[i].isShow = false
									this.goodsList.push(res.data.data.detailList[i])
								}
							}
							
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
				
			},
			changeRate(e){
				this.$forceUpdate()
			},
			packagingScoreChange(e) {
				this.express.packagingScore = e;
			},
			speedScoreChange(e) {
				this.express.speedScore = e;
			},
			goodsScoreChange(score, index) {
				this.goodsList[index].score = score;
			},
			submitsComment() {
				var that = this;
				uni.showLoading({
					title: '提交中...',
					mask: true
				});
				that.evaluate = [];
				
				for (var i = 0; i < that.goodsList.length; i++) {
					var data = {
						productScore:that.goodsList[i].rate,
						comment:that.goodsList[i].remark,
						imgs:String(that.goodsList[i].imgList),
						productId:'',
						orderDetailId:''
					}
					if(that.goodsList[i].rate == 0){
						uni.hideLoading()
						uni.showToast({
							icon:'none',
							title:'还有未评分的商品哦'
						})
						return
					}
					if(!that.info.combinationId){
						data.productId = that.goodsList[i].productId
						data.orderDetailId = that.goodsList[i].orderDetailId
					}
					that.evaluate.push(data)
				}
				this.uni_request({
					url: '/user/order/commentOrder',
					method: 'POST',
					data:{
						comments:that.evaluate,
						orderId:that.info.id
					},
					success: (res) => {
						uni.hideLoading()
						if (res.data.code == 0 || res.data.code == 200) {
							uni.showToast({
								icon:'none',
								title:res.data.msg
							})
							setTimeout(function() {
								uni.navigateTo({
									url:'/pages/order/index'
								})
							}, 1000);
							
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			
			choosePhoto(photos,index) {
				const count = 9 - photos.length;
				var that = this;
				uni.chooseImage({
					count: 9 - photos.length,
					success: (res) => {
						const tempFilePaths = res.tempFilePaths
						uni.showLoading({
							title:'上传中'
						})
						for (var i = 0; i < tempFilePaths.length; i++) {
							const uploadTask = uni.uploadFile({
								url: that.uploadUrl,
								filePath: tempFilePaths[i],
								name: 'file',
								success: function(res) {
									uni.hideLoading()
									var data  = JSON.parse(res.data)
									that.goodsList[index].imgList.push(data.data.url)
									that.$forceUpdate()
									
								},
								fail: (e) => {
									uni.hideLoading()
									uni.showToast({
										icon:'none',
										title:'图片上传失败，请稍后再试'
									})
								}
							});
						}
						
					}
				});
			},
			previewPhoto(url) {
				uni.previewImage({
					urls: [url]
				});
			},
			deletePhoto(urls, index, status) {
				if (status == 1) return;

				this.$alert('确定删除该图片吗？', {}, () => {
					urls.splice(index, 1);
				});
			},
			
		}
	}
</script>

<style lang="scss">
	.title {
		font-size: 30px;
		font-weight: bold;
		color: #757575;
		line-height: 68px;
	}

	.express-comment {
		padding: 25px 0;

		.main-wrap {
			@extend %flex-align-center;

			.left {
				margin-right: 50px;

				.rate {
					margin: 10px 0;
				}
			}

			.right {
				flex: 1;

			}
		}

		.btn-wrap {
			display: flex;
			justify-content: flex-end;
			padding-top: 15px;
		}
	}

	.goods-comment {
		padding: 30px 0;
		border-top: 1px solid $border-color;

		.main-wrap {
			@extend %flex-align-center;

			.thumb {
				width: 120px;
				height: 120px;
				cursor: pointer;
				border: 1px solid $border-color;
			}

			.right {
				flex: 1;
				margin-left: 20px;

				.top {
					@extend %flex-align-center;
					line-height: 40px;

					.level {
						margin-left: 15px;
						color: #e93323;
					}
				}
			}

			.textarea-comment {
				font-size: 14px;
			}
		}

		.bottom-wrap {
			padding-top: 15px;
			@extend %flex-align-center;
			justify-content: space-between;

			.goods-name {
				max-width: 120px;
				color: $text-color;
				text-align: center;
				cursor: pointer;

				&:hover {
					color: $color-primary;
				}
			}

			.right {
				flex: 1;
				margin-left: 20px;
				@extend %flex-align-center;

				.btn-upload {
					width: 90px;
					height: 90px;
					line-height: 90px;
					text-align: center;
					cursor: pointer;
					transition: all .3s;
					margin-right: 15px;
					background-color: $bg-color-grey;

					&:hover {
						background-color: $border-color;
					}

					.icon {
						color: #999;
						font-size: 28px;
					}
				}

				.photo {
					width: 90px;
					height: 90px;
					cursor: pointer;
					margin-right: 15px;
				}

				.btn {
					margin-left: auto;
				}
			}
		}
	}

	.comment-box {
		position: relative;
		padding: 20px;
		padding-bottom: 30px;
		border: 1px solid $border-color;

		.textarea-comment {
			width: 100%;
			min-height: 30px;
			font-size: 16px;
			color: $text-color;
		}

		.font-count {
			position: absolute;
			right: 10px;
			bottom: 10px;
			font-size: 12px;
			color: $text-color-grey;
		}
	}
	.btnBox{
		width: 100%;
		@extend %flex-align-center;
		justify-content: flex-end;
	}
	.btn {
		border: 1px solid $border-color;
		color: #757575;
		text-align: center;
		width: 100px;
		height: 30px;
		line-height: 30px;
		margin: 0;
		font-size: 14px;
		cursor: pointer;
		background-color: $bg-color;

		&:hover {
			color: #fff;
			background-color: $color-primary;
			border-color: $color-primary;
		}
	}
</style>
